<template> 
    <div class="address_container">
        <HeaderTop :goBack="true" :headTitle="headerTitle">
            <template #changecity>
                <span class="edit" @click="editThing">{{editText}}</span>
            </template>
        </HeaderTop>
        <section class="address">
            <ul class="address_list">
                <li v-for="(item, index) in removeAddress" :key="index">
                    <div>
                        <p class="li_head">
                            <span>{{item.name}}</span>
                            <span>{{item.phone}}</span>
                        </p>
                        <p class="li_content">
                            <span>{{item.address_detail}}&nbsp;{{item.address}}</span>
                        </p>
                    </div>
                    <div class="deletesite" v-if="deletesite">
                        <span @click="deleteSite(index, item)">x</span>
                    </div>
                </li>
            </ul>
            <router-link to="/profile/info/address/add">
                <div class="addsite">
                    <span>新增地址</span>
                    <div class="addsvg">
                        <svg fill="#d8d8d8">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </div>
                </div>
            </router-link>
        </section>
        <transition name="route-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop'
import {deleteAddress} from '@src/api/getData';
import {mapState,mapActions} from 'vuex'
export default {
    components:{
        HeaderTop
    },
    computed:{
        ...mapState([
                'user','removeAddress'
            ]),
    },
    data(){
        return {
            headerTitle:'地址管理',
            editText:'编辑',
            deletesite:false,
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        ...mapActions(['saveAddressList']),
        initData(){
            if (this.user && this.user.user_id) {
                this.saveAddressList();
            }
        },
        async deleteSite(index,item){
            if (this.user && this.user.user_id) {
                await deleteAddress(this.user.user_id, item.id);
                this.removeAddress.splice(index, 1);
                // this.removeAddress.push({"id":19645,"address":"35号908室","phone":"18877889988","phone_bk":"","name":"马云","st_geohash":"31.216499,121.522289","address_detail":"浅水湾恺悦名城","tag_type":4,"user_id":50043,"phone_had_bound":true,"deliver_amount":0,"agent_fee":0,"is_deliverable":true,"is_user_default":true,"tag":"公司","city_id":1,"sex":1,"poi_type":0,"created_at":"2020-04-05T09:22:18.295Z","is_valid":1,"__v":0})
            }
        },
        editThing(){
            if(this.deletesite === false){
                this.editText='完成'
                this.deletesite=true;
            }else{
                this.editText='编辑'
                this.deletesite=false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.address_container{
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
}
.edit{
    @include sc(0.7rem,#fff);
    @include ct;
    right: 0.4rem;
}
.address{
    width: 100%;
    margin-top: 0.4rem;
    border-top:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;
    .address_list{
        background: #fff;
        li{
            border-bottom: 0.025rem solid #d9d9d9;
            padding: 0.4rem;
            @include fj;
            .li_head{
                span:first-child{
                    @include sc(0.7rem,#666);
                    font-weight: 700;
                }
                span:last-child{
                    @include sc(0.65rem,#666);
                }
            }
            .li_content{
                line-height: 0.9rem;
                span{
                    @include sc(0.6rem, #999);
                }
            }
            .deletesite{
                @include fj(center);
                align-items: center;
                padding: 0 0.2rem;
                span{
                    color: #999;
                }
            }
        }
        li:nth-of-type(1){
            background:#FFF8C3;
        }
    }
    .addsite{
        margin-top:.4rem;
        background:#fff;
        padding:.2rem .4rem;
        border-top:1px solid #d9d9d9;
        @include fj;
        span{
            flex: 1;
            @include sc(.7rem,#333);
            line-height:1.4rem;
        }
        .addsvg{
            @include wh(.66667rem,1.4rem);
            svg{
                @include wh(100%,100%);
            }
        }
    }
}
.route-slide-enter,
.route-slide-leave-to
{
    transform: translateX(4rem);
    opacity: 0;
}
.route-slide-enter-active,
.route-slide-leave-active{
    transition: all 0.3s ease-in-out;
}
</style>